<template>
	<view class='container root-container' >
		<scroll-view :scroll-y="true" :style="[scrollViewStyle]">
			
      <view  class="item">
        <view class="title">姓名:{{item.name}}</view>
        <view style="height: 10px;"></view>
        
       <view class="xztv-row item-row " @click="contact">
         <view class="left">手机号</view>
         <view class="right">
           {{item.mobile}}
					  <uni-icons type="phone" size="20" color="black" style="margin-left:8rpx"></uni-icons>
         </view>
       </view>
        <view class="xztv-row item-row xztv-col-center ">
          <view class="left">小区名称</view>
          <view class="right">
            {{item.community_name}}
          </view>
        </view>
        <view class="xztv-row item-row xztv-col-center">
          <view class="left">门禁名称</view>
          <view class="right">
            {{item.device_name}}
          </view>
        </view>
        <view class="xztv-row item-row xztv-col-center">
          <view class="left">原因</view>
          <view class="xztv-column">
            <radio-group @change="radioChange" class="xztv-column">
              <label class="radio"><radio value="1" :checked="user_type == 1" />外卖</label>
              <label class="radio"><radio value="2" :checked="user_type == 2"/>快递</label>
              <label class="radio"><radio value="3" :checked="user_type == 3"/>访客</label>
              <label class="radio"><radio value="4" :checked="user_type == 4"/>送货</label>
              <label class="radio"><radio value="4" :checked="user_type == 5"/>家政</label>
              <label class="radio"><radio value="4" :checked="user_type == 6"/>保洁</label>
            </radio-group>
            
            
          </view>
        </view>
        <view class="submit-btn xztv-flex-center" @click="submit()" >
          <text>确定</text>
        </view>
      </view>
		</scroll-view>
   
	</view>
</template>

<script>
import {getStrangerInfo,strangerAudit} from '@/api/staff.js'
	export default {
		data() {
			return {
        id:"",
				phoneSys: {},
        item:{},
        showBtn:true,
        user_type:1,
			}
		},
		async mounted() {
			const sys = uni.getSystemInfoSync();
			this.phoneSys = {
				windowWidth: sys.windowWidth,
				windowHeight: sys.windowHeight,
				// #ifndef MP-ALIPAY
				safeBottom: sys.safeAreaInsets.bottom,
				// #endif
				// #ifdef MP-ALIPAY
				safeBottom: 0,
				// #endif
			};
		},
		computed: {
			scrollViewStyle() {
				let style = {};
				style.width = this.phoneSys.windowWidth + 'px';
				style.height = this.phoneSys.windowHeight + 'px';
				return style;
			},
		},
		onLoad(options) {
			this.id = options.id;
     
		},
		onShow() {
			this.getDetail();
		},
		methods: {
			contact(){
				uni.makePhoneCall({
					phoneNumber: this.item.mobile //仅为示例
				});
			},
      radioChange(evt) {
        this.user_type=evt.detail.value
      },
      submit(){
        strangerAudit({apply_id:this.item.id,user_type:this.user_type}).then((res)=>{
          if(res.data.code==0){
            uni.showModal({
            	title: '提示',
            	content: '操作成功',
              showCancel:false,
            	success: function (res) {
            		if (res.confirm) {
            			uni.navigateBack();
            		} else if (res.cancel) {
            			console.log('用户点击取消');
            		}
            	}
            });
            
          }else{
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
      },
      
      getDetail(){
        getStrangerInfo({id:this.id}).then((res=>{
        	if(res.data.code == 0){
        		this.item = res.data.data;
            
        	}
        }))
      },
		}
	}
</script>

<style lang="less" scoped>
  .radio{
    margin-top:20rpx;
    font-size: 40rpx;
  }
  .submit-btn{
    width: 620rpx;
    height: 94rpx;
    background: #4AB5FF;
    border-radius: 20rpx;
    margin-top:34rpx;
    font-size: 28rpx;
    color:white;
  }
  .add-box{
    position: absolute;
    bottom:262rpx;
    right:10rpx;
    width: 164rpx;
    height: 164rpx;
  }
  .introduce-title{
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    line-height: 42rpx;
    margin-top: 10rpx;
    padding: 10rpx 38rpx;
  }
	.container{
    position: relative;
		background: #F6F7F7;
		background-size: 100% 366rpx ;
		background-repeat: no-repeat;
    .item{
      position: relative;
      width: 698rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      margin:20rpx auto;
      padding: 40rpx 38rpx;
      box-sizing: border-box;
      .status-btn{
        width: 135rpx;
        height: 55rpx;
        border-radius: 0rpx 20rpx 0rpx 20rpx;
        position: absolute;
        right:0;
        top:0;
      }
      .status-wait{
        background: rgba(228, 139, 4, 0.14);
        color: rgba(228, 139, 4, 1);
      }
      .status-pass{
        background: rgba(19, 159, 0, 0.14);
        color: rgba(19, 159, 0, 1);
      }
      .status-refuse{
        background:rgba(0, 0, 0, 0.09);
        color:rgba(0, 0, 0, 0.34);
      }
      .title{
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
        line-height: 42rpx;
        margin-bottom: 10rpx;
      }
      .item-row{
        margin-top:14rpx;
        .left{
          width: 200rpx;
          font-weight: 400;
          font-size: 38rpx;
          color: rgba(0,0,0,0.4);
        }
        .right{
          flex: 1;
          font-weight: 400;
          font-size: 38rpx;
          color: #000000;
          line-height: 33rpx;
         
        }
        .map_icon{
          width:60rpx;
          height: 60rpx;
        }
      }
    }
	}
</style>